<template>
  <div class="page page-healthy-detail has-headbar">
    <head-bar :title="$route.meta.title" />
    <h2 class="title">{{title}}</h2>
    <img :src="banner" alt="" class="banner">
    <div class="info-box">
      <div class="address"><span class="icon icon-address"></span>{{address}} <span class="navigation" @click="navigationEvent">导航</span></div>
      <div class="phone"><span class="icon icon-phone"></span>{{contact}} <a  class="phone-number" href="tel:05738383971">{{phone}}</a></div>
      <div class="time"><span class="icon icon-time"></span>{{time}}</div>
      <div class="rule"><span class="icon icon-rule"></span>每日预约人数上限：{{total}}人</div>
    </div>
    <ul class="numberList">
  		<li>
  			<p class="timeTitle">选择预约时间</p>
        <van-tabs>
          <van-tab :title="item.dayTime" :key="item.dayTime" v-for="(item, index) in bookTimes">
            <div class="time-item-box">
              <span class="time-item" :class="{on: item.date === selectData.date && hour === selectData.time, disabled: item.status === 0 || total === item.totalNum}" v-for="(hour, i) in item.hourPoint" :key="i" @click="timeSelect(index, hour)">{{hour}}</span>
            </div>
          </van-tab>
        </van-tabs>
        <van-cell-group>
          <van-cell title="预定票数" class="order-box">
            <van-stepper v-model="bookNum" :max="timeMax"/>
          </van-cell>
          <van-field
            v-model="contactsPerson"
            label="联系人"
            name="name"
            placeholder="请输入联系人姓名"
            v-validate="'required'"
          />
          <van-field
            v-model="contactsPhone"
            type="phone"
            name="phone"
            label="电话"
            placeholder="请输入联系人电话"
            maxlength="11"
            v-validate="'required|phone'"
          />
        </van-cell-group>
  		</li>
  	</ul>
    <van-button size="large" @click="signEvent" :disabled="submitDisabled" :loading="submitLoading">立即预约</van-button>
    <div class="content-box">
      <div class="section-title" v-if="contentInfo">检测点介绍</div>
      <div class="html-content" v-html="contentInfo"></div>
    </div>
  </div>
</template>

<script>
import { API_PHYSICAL_DETAIL, API_PHYSICAL_BOOK } from '@/service/physical'
import { Tab, Tabs, Stepper } from 'vant'
import { mapState } from 'vuex'
import { certificateMixin } from '@/components/mixins'
export default {
  name: 'healthy-detail',
  mixins: [ certificateMixin ],
  components: {
    [Stepper.name]: Stepper,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data () {
    return {
      bookTimes: [],
      title: '',
      total: 0,
      banner: '',
      address: '',
      contact: ' ',
      phone: '',
      time: '',
      point: {
        lng: '',
        lat: ''
      },
      contentInfo: '',
      selectData: { // 选择数据
        date: '',
        time: '',
        totalNum: 0
      },
      bookNum: 1, // 预约人数
      contactsPerson: '',
      contactsPhone: '',
      userphone: '',
      submitLoading: false,
      submitDisabled: false
    }
  },
  computed: {
    ...mapState({
      lng: state => state.user.lng,
      lat: state => state.user.lat
    }),
    physicalid () {
      return this.$route.params.id
    },
    timeMax () {
      return this.total - this.selectData.totalNum
    }
  },
  mounted () {
    this.requestData()
  },
  methods: {
    requestData () {
      API_PHYSICAL_DETAIL(this.physicalid).then(resData => {
        let { totalNum, name, address, mainImageUrl, contactsPerson, contactsPhone, orderTime, locationlon, locationlat, contentInfo } = resData.core
        this.total = totalNum
        this.title = name
        this.banner = mainImageUrl
        this.address = address
        this.contact = contactsPerson
        this.phone = contactsPhone
        this.time = orderTime
        this.rule = ''
        this.contentInfo = contentInfo
        this.$set(this.point, 'lng', locationlon)
        this.$set(this.point, 'lat', locationlat)
        this.bookTimes = resData.list
        document.title = name
      })
    },
    timeSelect (index, hour) {
      // console.log(index, hour, this.bookTimes[index])
      let { date, status, totalNum } = this.bookTimes[index]
      // status 0 不能预约 1 能预约
      if (status === 1 && totalNum !== this.total) {
        this.$set(this.selectData, 'date', date)
        this.$set(this.selectData, 'time', hour)
        this.$set(this.selectData, 'totalNum', totalNum)
      } else {
        this.$toast('人数已满')
        this.selectData = {
          date: '',
          time: '',
          totalNum: 0
        }
      }
    },
    signEvent () {
      // if (!this.$store.state.account.accessToken) {
      //   this.$router.push({ name: 'login' })
      //   return
      // }
      this.certificateCheck().then(() => {
        this.submitEvent()
      })
    },
    submitEvent () {
      if (!this.selectData.date || !this.selectData.time) {
        this.$toast('请选择预约时间')
        return
      }
      if (this.bookNum > this.timeMax) {
        this.$toast('预定数量超出了')
        return
      }
      this.$validator.validate().then(result => {
        if (result) {
          this.submitLoading = true
          this.submitDisabled = true
          let reqData = {
            centerId: this.physicalid,
            orderDate: this.selectData.date,
            hourPoint: this.selectData.time,
            total: this.bookNum,
            userId: this.$store.getters.getUserInfo.userId,
            contactsPerson: this.contactsPerson,
            contactsPhone: this.contactsPhone
          }
          API_PHYSICAL_BOOK(reqData).then(resData => {
            this.$toast('预约成功！')
            this.$router.replace({ name: 'user-order-detail', query: { orderId: resData.info.id, type: resData.info.type } })
          }).catch(() => {
            this.submitDisabled = false
          }).finally(() => {
            this.submitLoading = false
          })
        } else {
          this.$toast(this.errors.all()[0])
        }
      })
    },
    navigationEvent () {
      window.location.href = `http://m.amap.com/navi/?start=${this.lng},${this.lat}&dest=${this.point.lng},${this.point.lat}&destName=${this.address}&naviBy=car&key=27bb1cfd99b20db0cd15533958dc1113`
    }
  }
}
</script>

<style lang="less">
.page-healthy-detail {
  @iconPath: "../../assets/images/icon";
  .title {
    font-size: 34/2px;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
  }
  .banner{
    width: 95%;
    display: block;
    margin: 0 auto;
    // box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
  }
  .info-box {
    font-size: 15px;
    padding-left: 12px;
    .address,.time,.rule,.phone {
      margin-top: 10px;
    }
    .phone-number{
      color: @colorPrimary;
    }
    .icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-position: center center;
      vertical-align: middle;
      &-address {
        background-image: url('@{iconPath}/icon_location.png');
        background-size: 14px 18px;
      }
      &-time {
        background-image: url('@{iconPath}/icon_clock.png');
        background-size: 18px 18px;
      }
      &-phone {
        background-image: url('@{iconPath}/icon_phone.png');
        background-size: 16px 16px;
      }
      &-rule {
        background-image: url('@{iconPath}/icon_person.png');
        background-size: 18px 18px;
      }
    }
     .navigation {
        display: inline-block;
        background: url("../../assets/images/detail/nav@2x.png") 0px 8px
          no-repeat;
        padding: 10px 0 10px 20px;
        background-size: 14px;
        margin-left: 5px;
        font-size: 14px;
      }
    .van-tag {
      background-color: @colorWarnin;
    }
  }
  .numberList{
		li{
      box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
      border-radius: 5px;
      margin: 10px;
      padding: 10px;
				.van-stepper{
					margin-bottom:5px;
				}
      .timeTitle{
      	font-size:14px;
        font-weight:bold;
        margin-bottom: 16px;
      }
		}
  }
  .order-box{
    margin-top: 15px;
    .van-cell__title {
      max-width: 90px;
    }
    .van-stepper{
      margin-bottom: 0;
      text-align: left;
    }
  }
  /* tabs */
  .van-tabs--line{
    padding-top: 65/2px;
  }
  .van-tabs--line .van-tabs__wrap{
    height: 60/2px;
  }
  .van-tab{
    background-color: #F7F7F7;
    color: #666666;
    font-size: 12px;
    line-height: 60/2px;
  }
  .van-tab--active{
    background-color: #E3E3E3;
    color: #576ED7;
  }
  .van-tabs__wrap--scrollable .van-tab{
    flex: 0 0 20%;
  }
  .van-tabs__line{display: none;}
  .time-item-box{
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgba(231,231,231,1);
    padding-top: 10px;
    border-top: none;
    .time-item{
      height: 20px;
      line-height: 20px;
      width:50px;
      display:inline-block;
      border-radius:20px;
      border:1px solid #CCC;
      text-align: center;
      margin: 0 7px 10px 7px;
      &.on{
        background:#8EA1F6;
        color:#fff;
        border:1px solid #8EA1F6;
      }
      &.disabled {
        background-color: #ccc;
      }
    }
  }
  .van-button{
    height: 40px;
    line-height: 40px;
    background: @buttonColorPrimary;
    color: #fff;
    display: block;
    width: 90%;
    margin: 25px auto;
    border: none;
    border-radius: 10px;
  }
  .content-box{
    h3{
      font-size: 15px;
      margin-top: 18px;
      margin-bottom: 12px;
      padding-left: 12px;
    }
    .html-content {
      padding-left: 12px;
      padding-right: 12px;

    }
  }
}
</style>
